import React, { useState, useEffect } from "react";
import { View, TextInput } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "@/contexts/ThemeContext";
import { getStyles } from "./index.style";

interface SearchUserBarProps {
  onSearch: (searchText: string) => void;
}

const SearchUserBar: React.FC<SearchUserBarProps> = ({ onSearch }) => {
  const { colors } = useTheme();
  const styles = getStyles(colors);

  const [searchText, setSearchText] = useState("");

  useEffect(() => {
    if (searchText === "") {
      // 清空搜索文本时可以通知父组件
      // onSearch(""); // 取消注释如果需要在清空时触发搜索
    }
  }, [searchText]);

  const handleSearch = () => {
    if (!searchText) return;
    onSearch(searchText);
  };

  return (
    <View>
      <View style={styles.searchSection}>
        <Ionicons
          name="search"
          size={20}
          color={colors.text.hint}
          style={styles.searchIcon}
        />
        <TextInput
          placeholder="输入用户 UUID 或 账号 进行搜索"
          value={searchText}
          onChangeText={setSearchText}
          style={styles.input}
          placeholderTextColor={colors.text.hint}
          onSubmitEditing={handleSearch}
        />
      </View>
    </View>
  );
};

export default SearchUserBar;
